<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-08-16 09:02:27
 * @LastEditors: tc
 * @LastEditTime: 2022-03-15 14:06:50
-->
<template>
    <div class="maintenance-box">
       <div class="dengji-box">
            <div class="charts" id="charts" ref="circle"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            charts:null
        }
    },
    watch: {
        data: {
            handler(val) {
                // this.currentInfo = val[0]
                // this.renderData(val)
                this.init()
            },
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    unmounted() {
        this.charts.dispose()
    },
    methods: {
       init() {
            const that = this
            let myCharts = null
            myCharts = that.$echarts.init(that.$refs.circle)
            that.charts = myCharts
            // that.renderData(this.data)
            myCharts.setOption(that.setOption())
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        setOption() {
            const that =this
            let option = {
                series: [
                    {
                        name: '内圈小',
                        type: 'gauge',
                        center: ['50%', '55%'],
                        radius: '90%',
                        z: 0,
                        startAngle: 220,
                        endAngle: -40,
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1,'#ECEEF2'],
                                ],
                                width: 30
                            }

                        },
                        splitLine: { //分隔线样式
                            show: false,
                        },
                        axisLabel: { //刻度标签
                            show: false,
                        },
                        pointer: {
                            show: false,
                        },
                        axisTick: { //刻度样式
                            show: false,
                        },
                        detail: {
                            show: false
                        }
                    },
                    // 内圆
                    {
                        type: 'pie',
                        silent: true,
                        radius: ['0', '60%'],
                        center: ['50%', '55%'],
                        z: 1,
                        itemStyle: {
                            color: '#ECEEF2',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        label: {
                            position: "center",
                        },
                        data:[0],
                    },
                    {
                        type: 'pie',
                        silent: true,
                        radius: ['0', '70%'],
                        center: ['50%', '55%'],
                        z: 0,
                        itemStyle: {
                            color: '#fff',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        },
                        label: {
                            position: "center",
                        },
                        data:[0],
                    },
                    //指针
                    {
                        type: 'gauge',
                        radius: '90%',
                        center: ['50%', '55%'],
                        startAngle: 180,
                        endAngle: 0,
                        z: 2,
                        min: 0,
                        max: 6,
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                color: [
                                    [0.3, '#13E267'],
                                    [0.7, '#0D93D9'],
                                    [1, "red"]
                                ],
                                width: 10
                            }
                        },
                        //分隔线样式。
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', // 箭头图标
                            length: '15%',
                            width: 10,
                            offsetCenter: [0, '-65%'], // 箭头位置
                            itemStyle: {
                                color: '#01415A', // 箭头颜色
                            },
                        },
                        //仪表盘详情，用于显示数据。
                        detail: {
                            show: true,
                            splitNumber: 15,
                            offsetCenter: [0, 0],
                            formatter: function(params) {
                                // console.log(params)
                                return params == 1 ? `{a|低风险}` : params == 3 ? `{b|中风险}` : params == 5 ? `{c|高风险}` : `{a|低风险}`
                            },
                            rich: {
                                a: {
                                    color: '#00B32E',
                                    fontSize: 20
                                },
                                b: {
                                    color: '#fbe010',
                                    fontSize: 20
                                },
                                c: {
                                    color: 'red',
                                    fontSize: 20
                                },
                            }
                        },
                        data: [{
                            value: that.data.grade == 1 ? 1 : that.data.grade == 2 ? 3 :that.data.grade == 3 ?5:1
                        }]
                    },
                    //圆点
                    {
                        type: 'gauge',
                        radius: '90%',
                        center: ['50%', '55%'],
                        startAngle: 180,
                        endAngle: 0,
                        z: 2,
                        min: 0,
                        max: 6,
                        axisLine: {
                            show:false,
                        },
                        //分隔线样式。
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        pointer: {
                            icon: 'circle', // 箭头图标
                            length: '15%',
                            width: 10,
                            offsetCenter: [0, '-85%'], // 箭头位置
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2,
                                color: '#004897', // 箭头颜色
                            },
                        },
                        //仪表盘详情，用于显示数据。
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: that.data.grade == 1 ? 1 : that.data.grade == 2 ? 3 :that.data.grade == 3 ?5:1
                        }]
                    }
                ]
            }
            return option
        }
    }
}
</script>

<style lang="scss" scoped>
.maintenance-box {
    height: 100%;
    box-sizing: border-box;
    .dengji-box {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        .charts {
            height: 100%;
            // border: 1px solid white;
        }
    }
}
</style>